<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <title></title>
</head>
<body>
<div class="my-head">
    <div class="container">
        <div class="col-sm-4">
            <img  class="index-log" src="../../images/index-logo.png">
        </div>
        <div class="col-sm-4 col-sm-push-4 index-hr">
            <div class="col-xs-6 col-xs-pull-1" >
                <form class="form-horizontal">
                    <div class="form-group index-hr-pd">
                        <div class="input-group ver-cen-pad" id="head-input-box">
                            <label for="index-search"class="sr-only">Search</label>
                            <input id="index-search" class="form-control" type="text">
                            <div class="input-group-btn index-search-icon"><button type="submit" class="btn" ><img class="search-btn" src="../../images/search-icon.png"></button></a></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-6 index-hr-pd ab-l">
                <ul class="nav nav-tabs user-login-box">
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="../../images/user-hd-img.png">
                            <span id="user-name">王晓华</span>
                            <span class="caret"></span></span>
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="list-group-item user-center-page">个人主页</a>
                            <a href="#" class="list-group-item user-set">账号设置</a>
                            <a href="#" class="list-group-item user-qus">常见问题</a>
                            <a href="#" class="list-group-item user-login-out">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="user-center-main">
    <div class="container">
        <div class="col-md-3">
            <div class="col-sm-12 user-center-detail text-center">
                <img src="../../images/user-hd-img.png"/>
                <p id="us-name">王小华</p>
                <p id="us-tips">知识就是力量</p>
                <a class="btn btn-success btn-block us-set">账号设置</a>
                <ul class="nav nav-pills nav-stacked text-left" role="tablist">
                    <li role="presentation" class="active u-center-home"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">个人主页</a></li>
                    <li role="presentation" class="u-center-source" ><a href="#my-source" aria-controls="my-source" role="tab" data-toggle="tab">我的课程</a></li>
                    <li role="presentation" class="u-center-record" ><a href="#bus-record" aria-controls="bus-record" role="tab" data-toggle="tab">交易记录</a></li>
                    <li role="presentation" class="u-center-diploma" ><a href="#diploma-list" aria-controls="#diploma-list" role="tab" data-toggle="tab">我的证书</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-9">
            <div class="tab-content user-center-page-box">
                <div role="tabpanel" class="tab-pane fade page1" id="home">
                    <div class="page1-part1">
                        <h4>最近动态</h4>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <p class="user-info"><span  class="user-info-t">上次登录时间</span><span class="user-last-lg">10小时前</span></p>
                            </li>
                            <li class="list-group-item">
                                <p class="user-info"><span class="user-info-t">已学课程</span><span class="user-last-lg">10小时前</span></p>
                            </li>
                            <li class="list-group-item">
                                <p class="user-info"><span class="user-info-t">已获证书</span><span class="user-last-lg">10小时前</span></p>
                            </li>
                            <li class="list-group-item">
                                <p class="user-info"><span class="user-info-t">提问</span><span class="user-last-lg">10小时前</span></p>
                            </li>
                            <li class="list-group-item">
                                <p class="user-info"><span class="user-info-t">回答</span><span class="user-last-lg">10小时前</span></p>
                            </li>
                        </ul>
                    </div>
                    <div class="page1-part2">
                     <h4>最近学习记录</h4>
                     <!--   <div class="no-study-record text-center">
                            <img src="../../images/no-study-record.png">
                            <a href="#" class="btn btn-block">马上学习</a>
                        </div>-->
                          <div class="row text-center">
                           <div class="col-sm-4 col-md-4">
                               <img src="../../images/recent-study-icons.png">
                               <span class="source-name"><设计与发现> 教材简介</span>
                               <span class="source-chapter">哈哈哈哈哈哈哈</span>
                               <a href="#" class="wrapper">
                                   <img src="../../images/wraper-icons.png">
                                   <span class="tz">11:00/30:00</span>
                               </a>
                           </div>
                           <div class="col-sm-4 col-md-4">
                               <img src="../../images/recent-study-icons.png">
                               <span class="source-name"><设计与发现> 教材简介</span>
                               <a class="wrapper">
                                   <img src="../../images/wraper-icons.png">
                                   <span class="tz">11:00/30:00</span>
                               </a>
                           </div>
                           <div class="col-sm-4 col-md-4">
                               <img src="../../images/recent-study-icons.png">
                               <span class="source-name"><设计与发现> 教材简介</span>
                               <a class="wrapper">
                                   <img src="../../images/wraper-icons.png">
                                   <span class="tz">11:00/30:00</span>
                               </a>
                           </div>
                       </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade  page2" id="my-source">
                    <div class="page2-part1">
                        <h4>课程学习</h4>
                    <!--    <div class="no-source-list text-center">
                            <img src="../../images/no-source-list.png">
                            <a href="#" class="btn btn-block">马上学习</a>
                        </div>-->
                        <div class="row text-center">
                            <div class="col-sm-4 col-md-4">
                                <img src="../../images/recent-study-icons.png">
                                <div class="col-sm-9 col-xs-9">
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                                            <span class="cur-progress">40%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-sx-3 source-tz">10 课时
                                </div>
                                <span class="source-name"><设计与发现> 教材简介</span>
                                <span class="res-tech">任老师</span>
                                <a href="#" class="wrapper">
                                    <img src="../../images/wraper-icons.png">
                                    <span class="tz">11:00/30:00</span>
                                </a>
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <img src="../../images/recent-study-icons.png">
                                <div class="col-sm-9 col-xs-9">
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                                            <span class="cur-progress">40%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-sx-3 source-tz">10 课时
                                </div>
                                <span class="source-name"><设计与发现> 教材简介</span>
                                <span class="res-tech">任老师</span>
                                <a href="#" class="wrapper">
                                    <img src="../../images/wraper-icons.png">
                                    <span class="tz">11:00/30:00</span>
                                </a>
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <img src="../../images/recent-study-icons.png">
                                <div class="col-sm-9 col-xs-9">
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                                            <span class="cur-progress">40%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-sx-3 source-tz">10 课时
                                </div>
                                <span class="source-name"><设计与发现> 教材简介</span>
                                <span class="res-tech">任老师</span>
                                <a href="#" class="wrapper">
                                    <img src="../../images/wraper-icons.png">
                                    <span class="tz">11:00/30:00</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade page3" id="bus-record">

                 <!--   <div class="no-orders text-center">
                    </div>-->
                    <table class="table">
                        <thead>
                            <tr class="text-center order-title">
                                <td>交易名称</td>
                                <td>交易方</td>
                                <td>金额（元）</td>
                                <td>交易状态</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="5" class="deal-detail"><span class="deal-tz">2016-01-10  21:56:12</span><span class="deal-num">交易号 : GDF1334653127</span></td>
                            </tr>
                            <tr>
                                <td>报名费-2016年青少年机器人大赛</td>
                                <td>中国青少年科技辅导员协会</td>
                                <td class="text-center deal-cost">¥100.00</td>
                                <td class="text-center deal-status deal-suc">交易成功</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="5" class="deal-detail"><span class="deal-tz">2016-01-10  21:56:12</span><span class="deal-num">交易号 : GDF1334653127</span></td>
                            </tr>
                            <tr>
                                <td>报名费-2016年青少年机器人大赛</td>
                                <td>中国青少年科技辅导员协会</td>
                                <td class="text-center deal-cost">¥100.00</td>
                                <td class="text-center deal-status">交易关闭</td>
                                <td class="text-center"><a href="#" class="btn re-pay">重新购买</a></td>
                            </tr>
                            <tr>
                                <td colspan="5" class="deal-detail"><span class="deal-tz">2016-01-10  21:56:12</span><span class="deal-num">交易号 : GDF1334653127</span></td>
                            </tr>
                            <tr>
                                <td>报名费-2016年青少年机器人大赛</td>
                                <td>中国青少年科技辅导员协会</td>
                                <td class="text-center deal-cost">¥100.00</td>
                                <td class="text-center deal-status">未支付</td>
                                <td class="text-center">
                                    <a href="#" class="btn pay btn-block">立即支付</a>
                                    <a href="#" class="btn cancel-pay btn-block">取消交易</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div role="tabpanel" class="tab-pane fade page4 in active" id="diploma-list">
                    <div class="diploma-list-top">
                        <h4>已获取 3 份证书</h4>
                    </div>
                    <div class="diploma-list-content">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td>课程名称
                                    </td>
                                    <td>证书类型
                                    </td>
                                    <td>电子证书获得时间
                                    </td>
                                    <td>申请纸质证书
                                    </td>
                                    <td>操作
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>《设计与发现》 中期作业说明</td>
                                    <td>技能证书
                                    </td>
                                    <td>2016 - 01 - 10<br>21 : 56 : 12</td>
                                    <td>未申请
                                    </td>
                                    <td><a href="#" class="link-apply-diploma">去申请</a></td>
                                </tr>
                                <tr>
                                    <td>《设计与发现》 中期作业说明</td>
                                    <td>技能证书
                                    </td>
                                    <td>2016 - 01 - 10<br>21 : 56 : 12</td>
                                    <td>未申请
                                    </td>
                                    <td><a href="#" class="link-apply-diploma">去申请</a></td>
                                </tr>
                                <tr>
                                    <td>《设计与发现》 中期作业说明</td>
                                    <td>技能证书
                                    </td>
                                    <td>2016 - 01 - 10<br>21 : 56 : 12</td>
                                    <td>已申请
                                    </td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>010-5653 8600</li>
                    <li>北京市朝阳区大屯东路名人公寓</li>
                    <li>media@zhigan-mail.com</li>
                </ul>
                <h5 class="foot-title-se">中国青少年科技辅导员协会 合作网站</h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                    <a class="back-top" href="#"></a>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script>
    $(".user-login-box").hover(function() {
        $(this).find(".dropdown-menu").show();
    },function(){
        $(this).find(".dropdown-menu").hide();
    });
</script>
</body>
</html>